<template>
    <div>
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/cart.html">购物车</a>
            </div>
        </div>

        <div class="section">
            <div class="wrapper">
                <div class="bg-wrap">
                    <!--购物车头部-->
                    <div class="cart-head clearfix">
                        <h2>
                            <i class="iconfont icon-cart"></i>我的购物车</h2>
                        <div class="cart-setp">
                            <ul>
                                <li class="first active">
                                    <div class="progress">
                                        <span>1</span>
                                        放进购物车
                                    </div>
                                </li>
                                <li class="active">
                                    <div class="progress">
                                        <span>2</span>
                                        填写订单信息
                                    </div>
                                </li>
                                <li class="last">
                                    <div class="progress">
                                        <span>3</span>
                                        支付/确认订单
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--购物车头部-->
                    <div class="cart-box">
                        <h2 class="slide-tit">
                            <span>1、收货地址</span>
                        </h2>
                        <el-form status-icon :model="order" :rules="rules" ref="orderForm" label-width="150px">
                            <div class="form-box address-info">
                                <el-form-item label="收货人姓名:" prop="accept_name">
                                    <el-input style="width:600px;" v-model="order.accept_name"></el-input>
                                </el-form-item>
                                <el-form-item label="所属地区:" prop="area">
                                    <v-distpicker @selected='onselect' :province="order.area.province.value" :city="order.area.city.value" :area="order.area.area.value"></v-distpicker>
                                </el-form-item>
                                <el-form-item label="详细地址:" prop="address">
                                    <el-input style="width:600px;" v-model="order.address"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号码:" prop="mobile">
                                    <el-input style="width:600px;" v-model="order.mobile"></el-input>
                                </el-form-item>
                                <el-form-item label="电子邮箱:">
                                    <el-input style="width:600px;" v-model="order.email"></el-input>
                                </el-form-item>
                                <el-form-item label="邮政编码:">
                                    <el-input style="width:600px;" v-model="order.post_code"></el-input>
                                </el-form-item>
                            </div>
                            <h2 class="slide-tit">
                                <span>2、支付方式</span>
                            </h2>
                            <ul class="item-box clearfix">
                                <!--取得一个DataTable-->
                                <li>
                                    <el-radio v-model="order.payment_id" label="6">在线支付</el-radio>&nbsp;手续费：0.00元
                                </li>
                            </ul>
                            <h2 class="slide-tit">
                                <span>3、配送方式</span>
                            </h2>
                            <ul class="item-box clearfix">
                                <!--取得一个DataTable-->
                                <li>
                                    <el-radio-group @change='switchExpress' v-model="order.express_id">
                                        <el-radio label="1">顺丰快递(20元)</el-radio>
                                        <el-radio label="2">圆通快递(10元)</el-radio>
                                        <el-radio label="3">韵达快递(8元)</el-radio>
                                    </el-radio-group>
                                </li>
                            </ul>
                            <h2 class="slide-tit">
                                <span>4、商品清单</span>
                            </h2>
                            <div class="line15"></div>
                            <table width="100%" border="0" align="center" cellpadding="8" cellspacing="0" class="cart-table">
                                <tbody>
                                    <tr>
                                        <th colspan="2" align="left">商品信息</th>
                                        <th width="84" align="left">单价</th>
                                        <th width="84" align="center">购买数量</th>
                                        <th width="104" align="left">金额(元)</th>
                                    </tr>
                                    <tr v-for='item in goodsList' :key='item.id'>
                                        <td width="68">
                                            <a target="_blank" href="/goods/show-89.html">
                                                <img :src="item.img_url" class="img">
                                            </a>
                                        </td>
                                        <td>
                                            <a target="_blank" href="/goods/show-89.html">{{item.title}}</a>
                                        </td>
                                        <td>
                                            <span class="red">
                                                ￥{{item.sell_price}}
                                            </span>
                                        </td>
                                        <td align="center">{{item.buycount}}</td>
                                        <td>
                                            <span class="red">
                                                ￥{{item.sell_price * item.buycount}}
                                            </span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="line15"></div>
                            <h2 class="slide-tit">
                                <span>5、结算信息</span>
                            </h2>
                            <div class="buy-foot clearfix">
                                <div class="left-box">
                                    <dl>
                                        <dt>订单备注(100字符以内)</dt>
                                        <dd>
                                            <textarea v-model='order.message' name="message" class="input" style="height:35px;"></textarea>
                                        </dd>
                                    </dl>
                                </div>
                                <div class="right-box">
                                    <p>
                                        商品
                                        <label class="price">{{totalCount}}</label> 件&nbsp;&nbsp;&nbsp;&nbsp; 商品金额：￥
                                        <label id="goodsAmount" class="price">{{totalAmount}}</label> 元&nbsp;&nbsp;&nbsp;&nbsp;
                                    </p>
                                    <p>
                                        运费：￥
                                        <label id="expressFee" class="price">{{order.expressMoment}}</label> 元
                                    </p>
                                    <p class="txt-box">
                                        应付总金额：￥
                                        <label id="totalAmount" class="price">{{getTotalAmount}}</label>
                                    </p>
                                    <p class="btn-box">
                                        <a @click='goBackToCart' class="btn button" >返回购物车</a>
                                        <a @click="goToPay" id="btnSubmit" class="btn submit">确认提交</a>
                                    </p>
                                </div>
                            </div>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import VDistpicker from 'v-distpicker'

import { getLocalObj } from '../../common/localStorageHelper.js';

    export default {
        data(){
            const checkMobile = (rule, value, callback) => {
                if (!value) {
                    return callback('请输入手机号');
                }
                if(!(/^1[34578]\d{9}$/.test(value))){ 
                    callback('手机号非法')  
                    return ; 
                } else {
                    callback();
                }
                    
            }
            return {
                goodsList:{},
                totalCount:0,
                totalAmount:0,
                order:{
                    accept_name:'张三',
                    area:{
                        province:{code:'440000',value:'广东省'},
                        city:{code:'440300',value:'深圳市'},
                        area:{code:'440306',value:'宝安区'}
                    },
                    address:'中粮商务公园2栋1309',
                    mobile:'13596541263',
                    email:'zhangsan@13.com',
                    post_code:'581000',
                    payment_id:'6',
                    express_id:'1',
                    expressMoment:20,
                    message:'快点发货',
                    goodsids:'',
                    cargoodsobj:{},
                    goodsAmount:0
                },
                rules: {
                    accept_name: [
                        { required: true, message: '请输入收件人姓名', trigger: 'blur' },
                    ],
                    area: [
                        { required: true, message: '请输入所属地区', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入所属地区', trigger: 'blur' },
                    ],
                    mobile: [
                        { required: true, validator: checkMobile, trigger: 'blur' },
                    ],
                 }
            }
        },
        created(){
            this.getGoodsList();
            // console.log(this.order);
        },
        computed:{
            getTotalAmount(){
                return this.order.expressMoment + this.totalAmount;
            }
        },
        methods:{
            switchExpress(label){
                switch(label){
                    case '1':
                        this.order.expressMoment = 20;
                        break;
                    case '2':
                        this.order.expressMoment = 10;
                        break;
                    case '3':
                        this.order.expressMoment= 8;
                        break;
                    default:
                        break;

                }
            },
            onselect(area){
                this.order.area = area;
            },
            getGoodsList(){
                this.order.goodsids = this.$route.params.ids;

                const getLocalObjInfo = getLocalObj();

                const url =  `site/validate/order/getgoodslist/${this.$route.params.ids}`;

            
                this.$axios.get(url).then(response=>{
                    let tempCount = 0;
                    let tempAmount = 0;
                    const tempObj = {};
                    // console.log(response.data);
                    response.data.message.forEach(item => {
                        item.buycount = getLocalObjInfo[item.id];
                        tempCount+=item.buycount;
                        tempAmount+=item.buycount * item.sell_price;
                        tempObj[item.id]= item.buycount;
                    });

                    this.order.goodsAmount = tempAmount;
                    this.order.cargoodsobj = tempObj;

                    this.totalCount = tempCount;
                    this.totalAmount = tempAmount

                    this.goodsList = response.data.message;
                })

            },
            goBackToCart(){
                this.$router.push({path:'/site/shopCart/'});
            },
            goToPay(){
                this.$refs.orderForm.validate((valid) => {
                if (valid) {
                    const url = `site/validate/order/setorder`;
                    this.$axios.post(url,this.order).then(response=>{
                        if(response.data.status==1){
                            this.$message.error('提交订单失败');
                            return;
                        }
                    const tempId = this.$route.params.ids.split(',');
                    tempId.forEach(gooodsId=>{

                        this.$store.commit('deleteGoodsById',gooodsId);
                    })
                    this.$router.push({path:`/site/payOrder/${response.data.message.orderid}`});
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
                
            }
            
        },
        components :{
            VDistpicker 
        }
    }
</script>
